<script setup>
import api from '@/api/index.js'
import { message } from 'ant-design-vue'
import { computed, ref, h, provide } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'
import { Modal } from 'ant-design-vue'
import { getConsants } from '@/utils'
import ImageView from '@/components/ImageView/ImageView.vue'

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 }
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: (e) => {
    emits('pageChange', e)
  }
}))

const emits = defineEmits(['edit', 'pageChange', 'reload'])

// 表格列配置
const columns = ref([
  { ellipsis: true, title: '工单编号', dataIndex: 'orderNo', key: 'orderNo' },
  { ellipsis: true, title: '申请人姓名', dataIndex: 'applyUserName', key: 'applyUserName' },
  { ellipsis: true, title: '申请人联系电话', dataIndex: 'applyUserPhone', key: 'applyUserPhone' },
  { ellipsis: true, title: '农机名称', dataIndex: 'machineName', key: 'machineName' },
  { ellipsis: true, title: '农机图片', key: 'machineImages' },
  { ellipsis: true, title: '接单人姓名', dataIndex: 'serviceUserName', key: 'serviceUserName' },
  {
    ellipsis: true,
    title: '接单人联系电话',
    dataIndex: 'serviceUserPhone',
    key: 'serviceUserPhone'
  },
  { ellipsis: true, title: '内容', dataIndex: 'serviceContent', key: 'serviceContent' },
  { ellipsis: true, title: '地址', dataIndex: 'serviceAddress', key: 'serviceAddress' },
  { ellipsis: true, title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
  { ellipsis: true, title: '结束时间', dataIndex: 'endTime', key: 'endTime' },
  { ellipsis: true, title: '损坏图片', key: 'badImages' },
  { ellipsis: true, title: '维保图片', key: 'workImages' },
  { ellipsis: true, title: '工单状态', key: 'orderStatus' },
  { ellipsis: true, title: '备注', dataIndex: 'serviceRemark', key: 'serviceRemark' },
  { ellipsis: true, title: '创建时间', dataIndex: 'createdTime', key: 'createdTime' },
  { ellipsis: false, title: '领用物资', key: 'info', fixed: 'right' },
  { ellipsis: true, title: '操作', key: 'set', width: 160, align: 'center', fixed: 'right' }
])

// 编辑数据
const edit = (item) => {
  emits('edit', item)
}

//删除数据
const del = (item) => {
  Modal.warning({
    title: '删除工单',
    content: h(
      'span',
      {},
      '是否删除工单：',
      h('span', { style: { color: '#09c690' } }, item.orderNo)
    ),
    okText: '删除',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.delOrd({ id: item.orderId })
      message.success('删除成功')
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消删除')
      return Promise.resolve()
    }
  })
}
const getInfos = ref({})
const getInfoLoading = ref(false)
const openChange = async (bool, record) => {
  if (bool && !getInfos.value[record.orderNo]) {
    getInfoLoading.value = true
    try {
      const {
        resultObject: { records }
      } = await api.getLywzList({ orderNo: record.orderNo, size: 9999 })
      getInfos.value[record.orderNo] = records
      getInfoLoading.value = false
    } catch (error) {
      getInfoLoading.value = false
    }
  }
}
provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)', x: 3000 }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'info'">
        <a-popover
          :overlay-inner-style="{ padding: 0 }"
          placement="left"
          @openChange="openChange($event, record)"
        >
          <template #content>
            <a-spin :spinning="getInfoLoading" wrapperClassName="com-spin">
              <a-empty
                v-if="!(getInfos?.[record.orderNo]?.length > 0)"
                style="padding-top: 30px"
              ></a-empty>
              <a-timeline style="padding: 20px">
                <a-timeline-item v-for="item of getInfos[record.orderNo]" :key="item.id">
                  <div>物资名称：{{ item.productName }}</div>
                  <div>数量：{{ item.quantity }}{{ item.unit }}</div>
                  <div>单价：{{ item.price ? item.price + '元' : '--' }}</div>
                  <div>
                    总价：{{
                      Number(item.quantity) * Number(item.price)
                        ? Number(item.quantity) * Number(item.price) + '元'
                        : '--'
                    }}
                  </div>
                </a-timeline-item>
              </a-timeline>
            </a-spin>
          </template>
          <span style="color: #09c690">领用物资</span>
        </a-popover>
      </template>
      <template v-if="column.key === 'orderStatus'">
        {{
          getConsants('order_status', record.orderStatus) === '维修中'
            ? '维保中'
            : getConsants('order_status', record.orderStatus)
        }}
      </template>
      <template v-if="column.key === 'machineImages' && record.machineImages">
        <ImageView :value="record.machineImages" />
      </template>
      <template v-if="column.key === 'badImages' && record.badImages">
        <ImageView :value="record.badImages" />
      </template>
      <template v-if="column.key === 'workImages' && record.workImages">
        <ImageView :value="record.workImages" />
      </template>
      <template v-if="column.key === 'set'">
        <AButton type="link" @click="edit(record)">编辑</AButton>
        <AButton type="link" class="com-delbtn" @click="del(record)">删除</AButton>
      </template>
    </template>
  </MyTable>
</template>
